<template>
  <div class="ele-body">
    <el-form
      ref="form"
      :model="form"
      :show-message="false"
      :rules="rules"
      label-width="110px"
      @keyup.enter.native="submit"
      @submit.native.prevent>
      <el-card shadow="never">
        <div class="tiktok-title">K手发布</div>
        <el-row :gutter="15" type="flex" justify="space-between">
          <!--          <el-col :lg="8" :md="10">-->
          <el-col :span="12">
            <el-form-item label="任务名称" prop="name" class="m-top10">
              <el-input
                style="width: 66%"
                v-model="form.name"
                placeholder="请输入任务名称"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :lg="11" :md="11">
            <el-steps :active="stepsActive" class="ele-steps-horizontal">
              <el-step title="第一步" description="选择素材、文案与挂载" />
              <el-step title="第二步" description="发布配置" />
            </el-steps>
          </el-col>
        </el-row>
      </el-card>
      <div class="m-top15" v-show="stepsActive==0">
        <el-card shadow="never">
          <div class="fit-title">选择素材</div>
          <div class="flex-align-center d-margin">
            <div v-for="(i,j) in materialType" :key="j" :class="(Number(form.materialType)-1) == j ? 'sel-title-class' : 'title-class'" class="pointer" @click="materialTypeClick(j)">
              {{i.name}}
            </div>
          </div>
          <!-- <el-form-item label="剪辑类型" prop="montageType" v-if="form.materialType==1">
             <el-radio-group v-model="form.montageType" @input="projectInit">
               <el-radio :label="2">口播剪辑</el-radio>
               <el-radio :label="1">AI剪辑</el-radio>
               <el-radio :label="3">图文剪辑</el-radio>
             </el-radio-group>
           </el-form-item>-->
          <el-form-item label="文件夹" prop="projectName" class="check-star"
                        :rules="!form.projectName  ? { required: true, message: '请选择文件夹', trigger: ['blur','change']} : {required: false}"
                        v-if="form.materialType==1">
            <div style="width: 30%;">
              <activities ref="connected" :dataInfo="form" @getData="getData" :hint="hint"></activities>
            </div>
          </el-form-item>

          <el-form-item label="文件夹" prop="projectName" class="check-star"
                        :rules="!form.projectName  ? { required: true, message: '请选择文件夹', trigger: ['blur','change']} : {required: false}"
                        v-if="form.materialType==2">
            <div style="width: 30%;">
              <piecesCom ref="connected" :dataInfo="form" @getData="getData" :hint="hint"></piecesCom>
            </div>
          </el-form-item>
          <!--<el-form-item label="文件夹" prop="videoMaterialId"
                        :rules="!form.videoMaterialId  ? { required: true, message: '请选择文件夹', trigger: ['blur','change']} : {required: false}"
                        v-if="form.materialType==2">
            <el-select
              style="width: 30%;"
              v-model="form.material"
              placeholder="请选择文件夹"
              class="ele-block"
              clearable
              @change="selectMaterial"
            >
              <el-option :label="i.name" :value="i" v-for="(i,j) in cameraList" :key="j" />
            </el-select>
          </el-form-item>-->
        </el-card>
        <el-card shadow="never">
          <div class="fit-title">选择文案与挂载</div>
          <el-row :gutter="15" class="flex-wrap">
            <el-col :span="12">
              <!--<el-form-item label="所属平台">
                <el-radio-group v-model="seoInfo.platform" @input="seoInit">
                  <el-radio :label="1">D音</el-radio>
                  <el-radio :label="2">K手</el-radio>
                  <el-radio :label="3">视频号</el-radio>
                </el-radio-group>
              </el-form-item>-->
              <el-form-item label="SEO文案" prop="seoName"
                            :rules="!form.seoName  ? { required: true, message: '请选择文案', trigger: ['blur','change']} : {required: false}">
                <!--SEO文案-->
                <div style="width: 66%;">
                  <acties ref="seoActies" :lists="seoList" @getData="selectCopy"></acties>
                </div>
                <!--<el-select
                  style="width: 66%;"
                  v-model="form.seoName"
                  placeholder="请选择文案"
                  class="ele-block"
                  clearable
                  @change="selectCopy"
                >
                  <el-option :label="i.taticsName" :value="i" v-for="(i,j) in seoList" :key="j" />
                </el-select>-->
              </el-form-item>

              <div class="check-star">
                <el-form-item label="挂载类型" prop="mountType">
                  <el-radio-group v-model="form.mountType">
                    <el-radio :label="2">小程序</el-radio>
                    <el-radio :label="3">不挂载</el-radio>
                  </el-radio-group>
                </el-form-item>

                <el-row :gutter="15" class="flex-wrap no-check-star">
                  <!--小程序-->
                  <el-col :span="24" v-if="form.mountType==2 ">
                    <!--非h5传anchorUrl(挂载小程序地址)，否则传全部-->
                    <el-form-item label="小程序地址" prop="appUrl">
                      <el-input
                        style="width: 66%;"
                        class="in-append"
                        type="text"
                        v-model="form.appUrl"
                        placeholder="请输入小程序地址"
                        clearable>
                      </el-input>
                    </el-form-item>
                    <!--接口需加字段 start-->
                    <el-form-item label="小程序标题" prop="appTitle">
                      <el-input
                        style="width: 66%;"
                        class="in-append"
                        type="text"
                        v-model="form.appTitle"
                        placeholder="请输入小程序标题"
                        clearable>
                      </el-input>
                    </el-form-item>
                    <el-form-item label="小程序id" prop="appId" class="delInput">
                      <el-input
                        style="width: 66%;"
                        class="in-append"
                        type="text"
                        v-model="form.appId"
                        max="20"
                        placeholder="请输入小程序id"
                        clearable>
                      </el-input>
                    </el-form-item>
                    <!--end-->
                  </el-col>
                </el-row>
              </div>


              <el-form-item label="挂载小黄车" prop="littleYellowCarId">
                <el-input
                  style="width: 66%;"
                  class="in-append delInput"
                  type="number"
                  oninput="value=value.replace(/[^0-9]/g,'')"
                  v-model.number="form.littleYellowCarId"
                  placeholder="请输入需要挂载小黄车的商品ID"
                  clearable>
                </el-input>
                <el-link type="primary" style="margin-left: 17px;" href="https://open.kwaixiaodian.com/docs/api?categoryId=44&apiName=open.item.list.get&version=1" target="_blank">如何获取商品ID<i class="el-icon-question"></i> </el-link>
              </el-form-item>
            </el-col>
          </el-row>
          <div class="m-left10">
            <el-button type="primary" @click="stepsNext">
              下一步
            </el-button>
          </div>
        </el-card>
      </div>
      <div class="m-top15" v-show="stepsActive==1">
        <el-card shadow="never">
          <div class="fit-title">选择配置</div>
          <el-form-item label="发布时间" prop="publishTimeType">
            <el-radio-group v-model="form.publishTimeType">
              <el-radio :label="1">随机</el-radio>
              <el-radio :label="2">指定</el-radio>
            </el-radio-group>
          </el-form-item>
          <!--随机-->
          <el-row :gutter="100" v-if="form.publishTimeType==1">
            <el-col :span="18" class="flex-between">
              <el-form-item label="开始发布日期" prop="startDate">
                <el-date-picker
                  style="width: 300px;"
                  v-model="form.startDate"
                  :picker-options="pickerOptions"
                  type="date"
                  placeholder="请选择发布时间"
                  @change="selTime">
                </el-date-picker>
              </el-form-item>
              <el-form-item label="每天发布数量" prop="dayCount">
                <el-input
                  style="width: 300px;"
                  class="delInput"
                  type="number"
                  v-model.number="form.dayCount"
                  placeholder="请输入发布数量"
                  @input="numInput"
                  clearable
                />
              </el-form-item>
            </el-col>
            <el-col :span="18" class="flex-between">
              <el-form-item label="发布天数" prop="publishDays">
                <!--最多7天——后增加为30天-->
                <el-input
                  type="number"
                  max="30"
                  min="1"
                  style="width: 300px;"
                  v-model.number="form.publishDays"
                  placeholder="请输入天数"
                  @input="dayInput"
                  clearable
                />
              </el-form-item>
              <el-form-item label="账户分组" prop="accountGroupName">
                <el-select
                  style="width: 300px;"
                  v-model="form.accountGroupName"
                  placeholder="请选择账号分组"
                  class="ele-block"
                  clearable
                  @change="accountGroup"
                >
                  <div v-for="(i,j) in groupList" :key="j">
                    <el-option :label="i.groupName" :value="i" />
                  </div>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="18">
              <el-form-item label="发布账户" prop="value">
                <el-transfer :props="{key: 'id',label: 'nickname'}" :titles="['未选择账户列表','已选择账户列表']" class="transfer-class" v-model="value" :data="accounts" @change="transferChange">
                  <!--数据项添加'头像'图片 -->
                  <span slot-scope="{ option }" class="flex-align-center"><img :src="option.head" class="transfer-img" /><div class="transfer-name">{{ option.nickname }}</div></span>
                </el-transfer>
              </el-form-item>
            </el-col>
          </el-row>
          <div v-if="form.publishTimeType==2">
            <el-form-item label="选择账户" prop="groupName">
              <el-button type="primary" @click="selectAccount">请选择账户</el-button>
            </el-form-item>
            <!--“已选择账户” 展示-->
            <div class="flex-wrap">
              <div class="account-all" v-for="(i,j) in accountList" :key="j">
                <div class="account-msg flex-column">
                  <img :src="i.head">
                  <div class="width100 font-overflow">{{i.nickname}}</div>
                </div>
                <!--pulishtime：null 未指定-->
                <div class="is-appoint">{{i.time ? '已指定' : '未指定'}}</div>
                <!-- trigger="click" 点击激活 去除则是hover-->
                <el-dropdown class="dropdown-class">
                  <i class="el-icon-more"></i>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item style="color: #1E6CEB;text-align: center" @click.native="specifyTime(j)">指定时间</el-dropdown-item>
                    <el-dropdown-item style="color: #FF4636;text-align: center" :divided="true" @click.native="delAccount(j)">删除</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </div>
            </div>
          </div>
          <div class="m-confirm">
            <el-button type="primary" @click="stepsPrev">上一步</el-button>
            <el-button type="primary" @click="confirm" :loading="loading">确认提交</el-button>
          </div>
        </el-card>
      </div>
    </el-form>
    <!-- 指定状态——选择账户,共享抖音的选择账号 -->
    <select-account :isKshou="true" ref="account" :visible.sync="isSelectAccount" :groupList="groupList" @account="accountClick"></select-account>
    <!--‘指定时间’弹框-->
    <!--<time-modal ref="timeShow" :list="accountList[timeIndex]" :tomorrow="this.$sun.tomorrow()"  @timeClick="timeClick"></time-modal>-->

    <sel-time ref="timeShow" :list="accountList[timeIndex]" @timeClick="timeClick"></sel-time>
  </div>
</template>

<script>
  import activities from '@/components/activities/connected-activities'
  import acties from '@/components/pagination/activities'
  import piecesCom from '@/components/activities/pieces-activities'
  import timeModal from './components/time-modal.vue'
  import {addKuaishou} from "@/api/releaseManage/kwai";
  import {listUserFiles, publicFile} from "@/api/creatCenter/material";
  import {projectPage} from "@/api/creatCenter/authoringClips";
  import {querySeo} from "@/api/matrixManage/seo";
  import {queryGroup} from "@/api/matrixManage/groupManage";
  import {accountQuery2} from "@/api/matrixManage/accountList";
  import selectAccount from "../tiktok/components/select-account";
  import {publishAdd, publishCreate} from "@/api/releaseManage/tiktok";
  import RegionsSelect from "@/components/RegionsSelect/index";
  import {submitDiyJob, submitImageJob, submitProjectJob} from "@/api/explosiveCode/releaseActivity";
  import SelTime from "@/views/matrixManage/releaseManage/tiktok/components/sel-time";
  export default {
    name: "index",
    components:{
      SelTime, timeModal,selectAccount,activities,piecesCom, acties
    },
    data() {
      const generateData = _ => {
        const data = [];
        for (let i = 1; i <= 15; i++) {
          data.push({
            key: i,
            label: `备选项 ${ i }`,
            disabled: i % 4 === 0
          });
        }
        return data;
      };
      return {
        materialType: [
          {
            name:'云创作成片库',
            id:1
          },
          {
            name:'云闪推成片库',
            id:2
          }
        ],
        loading:false,
        // 日期设置对象
        pickerOptions: {
          disabledDate(time) {
            // return time.getTime() < Date.now() - 8.64e7;   //禁用以前的日期，今天不禁用
            return time.getTime() <= Date.now();    //禁用今天以及以前的日期
          }
        },
        dayData : ['07:00','07:30','08:00','08:30','09:00','09:30','10:00','10:30','11:00','11:30',
          '12:00','12:30','13:00','13:30','14:00','14:30','15:00','15:30','16:00','16:30',
          '17:00','17:30','18:00','18:30','19:00','19:30','20:00','20:30','21:00','21:30',
          '22:00','22:30','23:00','23:30','24:00'],
        // 穿梭框 start
        data: generateData(),
        value: [],
        // end
        // 步骤条 进度
        stepsActive: 0,
        form:{
          // 挂载类型
          mountType:2,
          // 云创作成片库/云闪推成片库，分类
          materialType:1,
          // 1.抖音h5 2.抖音无痕(cookid) 3.抖音代员工 4.快手
          types:4,
          // 发布时间 1.随机 2.指定
          publishTimeType: 1,
          // 挂载类型
          linkType:1,
          // 发布状态: 1.未发布 2.发布成功 3.发布失败
          publishStatus:1,
          // 发送天数
          // publishDays:1,
          // 小黄车ID
          // littleYellowCarId:1,
          // 发布类型选择指定时间必传用户参数
          /*scheduleTimes:[{
            accountId: 11,// 发布账号ID
            releaseDate:"05-25", // 发布日期
            releaseTime:"18-00", // 发布时间
            // head:"https://static.yximgs.com/s1/i/def/head_u.png", // 头像
            // nickname:"K手用户1665390794338" // 昵称
          }]*/
        },
        rules: {
          name: [
            {
              required: true,
              message: '请输入任务名称',
              trigger: 'blur'
            }
          ],
          /*projectName: [
            {
              required: true,
              message: '请选择文件夹',
              trigger: 'blur'
            }
          ],*/
          seoName: [
            {
              required: true,
              message: '请选择SEO名称',
              trigger: 'blur'
            }
          ],

          // 挂载类型——小程序
          appUrl: [
            {
              required: true,
              message: '请输入小程序地址',
              trigger: 'blur'
            }
          ],
          appTitle: [
            {
              required: true,
              message: '请输入小程序标题',
              trigger: 'blur'
            }
          ],
          appId: [
            {
              required: true,
              message: '请输入小程序id',
              trigger: 'blur'
            }
          ],
          // littleYellowCarId: [
          //   {
          //     required: true,
          //     message: '请输入小黄车ID',
          //     trigger: 'blur'
          //   }
          // ],
          publishTimeType: [
            {
              required: true,
              message: '请选择发布时间',
              trigger: 'blur'
            }
          ],
          /*随机 start*/
          startDate: [
            {
              required: true,
              message: '请选择开始发布时间',
              trigger: 'blur'
            }
          ],
          publishDays: [
            {
              required: true,
              message: '请输入发布天数',
              trigger: 'blur'
            }
          ],
          dayCount: [
            {
              required: true,
              message: '请输入每天发布数量',
              trigger: 'blur'
            }
          ],
          accountGroupName: [
            {
              required: true,
              message: '请选择账户分组',
              trigger: 'blur'
            }
          ],
          /*随机 end*/
        },
        ipLocation:'',
        // 是否选择账户
        isSelectAccount: false,
        // 列表数据
        dataList: [],
        list: [],
        initInfo:{
          username:this.$store.state.user.info.username,
          limit:10,
          page:1
        },
        // seo 列表
        seoList:[],
        // 分组数据
        groupList: [],
        // 用户信息list
        accounts:[],
        // 省市
        provinceCity:'',
        // POI地址
        poiList:[],
        hint:'',

        // 开始时间
        startDate:'',
        // 日期列表 (年月日)
        dateList:[],
        // 分组 穿梭框数据
        selAccountList:[],
        // 分组信息
        accountInfo:{},
        // 账号信息
        accountList:[],
        timeIndex:-1,
        // 穿梭框 右侧获取到的数组id
        rightList:[],
        // tomorrow: this.$sun.getLastOrNextFewDateBy(new Date(),this.form.publishDays)
        seoInfo:{
          username:this.$store.state.user.info.username,
          limit:10,
          page:1,
          // seo 所属平台：1D音2K手3视频号
          platform:2
        },
        maxNum:0,  // 关联活动最大剪辑数量
      };
    },
    // 路由刷新
    activated() {
      this.$nextTick(() => {
        this.$refs['connected'].init()
      })

      this.init()
      this.projectInit()
      this.seoInit()
    },
    created(){
    },
    methods:{
      // 切换 ‘类型’
      materialTypeClick(e){
        // 素材类型 1.云创作成片库 2.云闪推成片库
        this.form.materialType=this.materialType[e].id
        this.form.projectId=''
        this.form.projectName=''
      },
      getData(e){
        console.log("选择文件夹e",e)
        this.form.projectId=e.id //剪辑工程ID

// 1:云创作成片库 2：云闪推成片库
        if(this.form.materialType==2){
          this.$set(this.form,'projectName',e.projectName) //剪辑工程名
          this.form.numberCount=e.jjCount //选择文件夹的总数量
          // this.maxNum=e.max
          // 剩余剪辑数量
          this.maxNum=e.jjCount
        }
        else{
          // 剩余剪辑数量
          this.maxNum=e.max-e.montageCount
          this.form.numberCount=e.countNumber //选择文件夹的总数量
          this.$set(this.form,'projectName',e.name) //剪辑工程名
        }

      },
      projectInit(){
        if(this.form.projectName){
          delete this.form.projectId     //剪辑工程ID
          delete this.form.projectName   //剪辑工程名
        }
        this.$nextTick(() => {
          this.$refs['connected'].init()
        })
        return
        Object.assign(this.initInfo, {
          // 1:脚本剪辑 2:自定义剪辑 3:图文剪辑
          type:this.form.montageType
        })
        // 活动名称
        projectPage(this.initInfo)
          .then((data) => {
            this.list=data.list;
          })
          .catch((e) => {
            this.$message.error(e);
          });
      },
      seoInit(){
        /*if(this.form.seoName){
          delete this.form.seoName
        }*/
        // 查询SEO文案【分页查询】 在查询列表页使用
        querySeo(this.seoInfo)
          .then((data) => {
            this.seoList=data.list
            this.$nextTick(()=>{
              this.$refs['seoActies'].init()
            })
          })
          .catch((e) => {
            this.$message.error(e.msg);
          });
      },


      // 未使用
      async init(){
        // 初始化分组
        queryGroup({
          username:this.$store.state.user.info.username,
          limit:10,
          page:1,
          groupType:4
        })
          .then((data) => {
            this.groupList=data.list
          })
          .catch((e) => {
            this.$message.error(e);
          });
      },

      // 指定时间click
      timeClick(e,showTime){
        //  this.accountList[this.timeIndex] 子组件选择的时间回显
        this.$set(this.accountList[this.timeIndex],'time',e)
        this.$set(this.accountList[this.timeIndex],'timeText',showTime)
      },
      /*timeClick(e){
        this.$set(this.accountList[this.timeIndex],'time',e)
        console.log("this.accountList", this.accountList)
      },*/
      // 账号信息
      accountClick(e,item){
        // this.form.accountGroupName=item.accountGroupName
        // this.form.accountGroup=item.accountGroup
        this.accountInfo=item
        this.accountList=e
        this.$refs['account'].clear()
      },

      // 选择 视频素材
      selectVideo(e){
        console.log('选择 视频素材',e)
        this.form.projectId=e.id //剪辑工程ID
        this.form.projectName=e.name //剪辑工程名
      },
      // 选择文案
      selectCopy(e){
        console.log('选择文案',e)
        this.form.seoId=e.id //SEO ID
        this.form.seoName=e.taticsName //SEO名称
      },

      // 选择'账号分组'
      accountGroup(e){
        console.log('选择账号分组i=========',e)
        this.form.accountGroupName=e.groupName
        this.form.accountGroup=e.id
        this.query(e.id)
      },

      // 查询矩阵账号【分页查询】
      query(id){
        let parms = {
          username:this.$store.state.user.info.username,
          // limit:10,
          // page:1,
          type:2,  //账号类型 : 1D音2K手
          // authStatus:1, //授权状态:  0失效1正常
          groupId:id // 分组ID
        }
        accountQuery2(parms)
          .then((data) => {
            this.accounts=data
            // 清空穿梭框 右侧的数据
            this.value=[]
            console.log("this.accounts",this.accounts)
          })
          .catch((e) => {
            this.$message.error(e);
          });
      },

      // 选择发布时间
      selTime(e){
        console.log('selTime=======',e)
        this.startDate=e
        // msToDate: 中国标准时间转化为年月日
        this.form.startDate= this.$sun.msToDate(e)
      },
      // '穿梭框'右侧列表元素变化时触发
      transferChange33(a){
        //循环右侧数据，根据右侧数据给出的key，嵌套循环原始数据
        //找到原始数据对应的项，压入right数组
        for (let i = 0; i < a.length; i++) {
          this.accounts.forEach((item) => {
            if (item.id  == a[i]) {
              // 右侧穿梭框数据赋值
              this.selAccountList.push(item);
            }
          });
        }

      },
      transferChange(a) {
        // 账号数据置空，以免提交失败，重复赋值
        this.selAccountList=[]
        this.rightList=a
      },

      // '发布天数' 限制最多输入30天
      dayInput(){
        this.form.publishDays= this.form.publishDays>30 ? 30 : this.form.publishDays
      },
      // '每天发布数量' 限制最多输入35个时间端
      numInput(){
        this.form.dayCount= this.form.dayCount>35 ? 35 : this.form.dayCount
      },

      // D音——小程序删除
      appletClear(){
        delete this.form.appUrl
        delete this.form.appTitle
        delete this.form.appId
      },

      /* "选择账户" 弹框 */
      selectAccount(){
        this.isSelectAccount = true
      },
      /* 上一步 */
      stepsPrev() {
        this.stepsActive--;
        if (this.stepsActive < 0) {
          this.stepsActive = 2;
        }
      },
      /* 下一步 */
      stepsNext() {
        this.stepsActive++;
        if (this.stepsActive > 2) {
          this.stepsActive = 0;
        }
      },
      /* 确认提交 */
      confirm(){
        //循环右侧数据，根据右侧数据给出的key，嵌套循环原始数据(防止穿梭框传入左边时，出现的只增不减的问题)
        //找到原始数据对应的项，压入right数组
        for (let i = 0; i < this.rightList.length; i++) {
          this.accounts.forEach((item) => {
            if (item.id  == this.rightList[i]) {
              // 右侧穿梭框数据赋值(在结算是赋值右侧列表)
              this.selAccountList.push(item);
            }
          });
        }
        /*校检*/
        this.$refs.form.validate((valid, obj) => {
          console.log('valid',valid,'obj',obj)
          for(let i in obj){
            console.log("i",i)
            console.log("obj=========",obj[i][0].message)
            this.hint=obj[i][0].message
            break
          }
          console.log('this.hint',this.hint)
          if (valid) {

            // 修改1
            if(!this.form.projectId){
              this.hint='请选择文件夹'
              this.$message.error(this.hint)
              return
            }


            // 获取指定时间的发布账号
            this.getAccount()

            // 发布账号数据
            console.log('this.selAccountList',this.selAccountList)
            // publishTimeType : 1,随机 2,指定
            // accountList：账号列表
            if(this.form.publishTimeType==2 && this.accountList.length<=0 || this.form.publishTimeType==1 && this.selAccountList.length<=0 ){
              this.$message.error('请选择发布账户')
              return
            }
            // accountList：账号列表  uploadAccount：指定时间总数组
            if(this.form.publishTimeType==2 && this.uploadAccount.length<=0 ){
              this.$message.error('未指定发布时间')
              return
            }
            // 如果是随机，进入计算
            if(this.form.publishTimeType==1){
              this.randomInfo()
            }
            else {
              this.form.accountGroupName=this.accountInfo.accountGroupName
              this.form.accountGroup=this.accountInfo.accountGroup
            }
            this.form.scheduleTimes = this.uploadAccount //修改11
            this.form.dayCount=Number(this.form.dayCount)
            Object.assign(this.form, {
              // 用户名
              username:this.$store.state.user.info.username
            })
            this.loading = this.$loading({
              lock: true,
              text: 'Loading',
              spinner: 'el-icon-loading',
              background: '#ffffffe6'
            });
            // this.loading = true;
            if(this.form.mountType==3){
              this.appletClear()
            }
            // 调用“K手发布”接口
            this.ksRelease()

          } else {
            this.$message.error(this.hint)
            return false;
          }
        });
      },

      /* 抖音获取指定时间的发布账号 */
      getAccount(){
        if(this.form.publishTimeType!=2){
          return
        }
        let list2=[]
        // list 为父组件传入的已赋值数据
        for(let i=0;i<this.accountList.length;i++){
          let account=this.accountList[i]
          if(account.time){
            let selected=account.time.split(",")
            for(let i=0;i<selected.length;i++){
              var list ={}
              // 发布时间
              account.publishTime=selected[i]+':00'
              // 发布日期
              account.releaseDate=selected[i].split(' ')[0].slice(5)
              let times=selected[i].split(' ')[1]
              // 发布时间
              account.releaseTime=times.split(':')[0] + '-' +times.split(':')[1]
              console.log("selected[i]",selected[i])
              console.log("selected[i].split(':')[1]",selected[i].split(' ')[1])

              console.log("selected[i].slice(5)",selected[i].split(' ')[0].slice(5))

              for (const key in account) {
                list[key] = account[key]
              }
              list2.push(list)
            }
          }
          this.uploadAccount=list2
          console.log("指定时间timeClick",this.uploadAccount)

        }
      },
      /* 快手单日获取指定时间的发布账号——暂不使用 */
      getAccount234(){
        if(this.form.publishTimeType!=2){
          return
        }
        let list2=[]
        // list 为父组件传入的已赋值数据
        for(let i=0;i<this.accountList.length;i++){
          let account=this.accountList[i]
          console.log("account=======",account)

          let tomorrow=this.$sun.tomorrow()
          let selected=account.time
          if(selected){
            for(let i=0;i<selected.length;i++){
              var list ={}
              // 发布日期
              account.releaseDate=tomorrow.slice(5)
              // 发布时间
              account.releaseTime=selected[i].split(':')[0]+ '-' + selected[i].split(':')[1]
              for (const key in account) {
                list[key] = account[key]
              }
              list2.push(list)
            }
          }
          this.uploadAccount=list2

        }
      },
      // '随机' 给form的布局
      randomInfo(){
        // 清空总数据，重新计算
        this.uploadAccount=[]
        // 获取后N天日期 ‘发布天数’计算后年月日 dateList:年月日数组
        this.dateList = this.$sun.getLastOrNextFewDateBy(this.startDate,this.form.publishDays)
        // 集合 年月日 + 时分秒
        const timeList = []

        /*修改111 start*/
        // 测试olds_原始数组
        for(let i=0;i<this.selAccountList.length;i++) { // 修改1
          this.dateList.forEach(item => {
            // randomNum: 根据'每天发布数量' ，获取随机的时间time 例如：12:00:00
            let randomList = this.$sun.randomNum(this.dayData, this.form.dayCount)
            randomList.forEach(child => {
              timeList.push(item + ' ' + child + ':00') // 增加秒
            })
          })
        }

        // new_目标数组
        const timeList2 = []
        for(let i=0;i<this.selAccountList.length;i++) { // 修改1
          console.log('this.selAccountList',this.selAccountList,'iiiiiiiiiiii',i)
          let account=this.selAccountList[i]
          this.dateList.forEach((item ,j)=> {
            console.log("this.dateList",this.dateList,'jjjjjjj',j)
            // randomNum: 根据'每天发布数量' ，获取随机的时间time 例如：12:00:00
            let randomList = this.$sun.randomNum(this.dayData, this.form.dayCount)
            // 发布时间
            randomList.forEach(child => {
              // account.publishTime=item + ' ' + child + ':00'
              account.productPolderId=this.form.projectId //选择文件夹id
              timeList2.push(account) // 增加秒
            })
          })
        }

        console.log('随机时间打印222timeList',timeList,'this.selAccountList',this.selAccountList,'timeList222222222',timeList2)


        const originalArray =JSON.parse(JSON.stringify(timeList2));
// 目标数组
        const targetArray = timeList
// 使用 map() 方法将原始数组的字段赋值给目标数组
        targetArray.map((item,j) => {
          originalArray[j].publishTime=(item); // 完整发布时间
          originalArray[j].releaseDate=item.split(' ')[0].slice(5) // 发布日期 【例：12-25】
          let times=item.split(' ')[1]
          originalArray[j].releaseTime=times.split(':')[0] + '-' +times.split(':')[1] // 发布时间 【例：09-00】
          originalArray[j].productPolderId=this.form.projectId //选择文件夹id

        });

        console.log('originalArray===========',originalArray);
        this.uploadAccount=originalArray
        /*修改111 end*/


        /* this.dateList.forEach(item => {
           // randomNum: 根据'每天发布数量' ，获取随机的时间time 例如：12:00:00
           let randomList = this.$sun.randomNum(this.dayData,this.form.dayCount)
           randomList.forEach(child => {
             timeList.push(item + ' ' + child)
           })
         })


         // 修改start（需修改）——测试完成，正确，需同步快手/抖音 共4个页面
         let list2=[]
         for(let i=0;i<this.selAccountList.length;i++){
           let account=this.selAccountList[i]
           for(let i=0;i<timeList.length;i++){
             var list ={}
             // 发布时间
             account.publishTime=timeList[i]
             let releaseDate=timeList[i].split(' ')[0]      // releaseDate:发布日期
             account.releaseDate=releaseDate.slice(5)
             // releaseTime 发布时间
             let releaseTime=timeList[i].split(' ')[1]
             account.releaseTime=releaseTime.split(':')[0] + '-' + releaseTime.split(':')[1]
             for (const key in account) {
               list[key] = account[key]
             }
             list2.push(list)
           }
           this.uploadAccount=list2
         }*/
        console.log("this.uploadAccount222测试",this.uploadAccount)
        // 修改end


        // selAccountList 为父组件传入的已赋值数据
        /*for(let i=0;i<timeList.length;i++){
          var list ={}
          for(let j=0;j<this.selAccountList.length;j++){
            // this.selAccountList[j].publishTime=timeList[i]
            let releaseDate=timeList[i].split(' ')[0]      // releaseDate:发布日期
            this.selAccountList[j].releaseDate=releaseDate.slice(5)
            // releaseTime 发布时间
            let releaseTime=timeList[i].split(' ')[1]
            this.selAccountList[j].releaseTime=releaseTime.split(':')[0] + '-' + releaseTime.split(':')[1]
            for (const key in this.selAccountList[j]) {
              list[key] = this.selAccountList[j][key]
            }
          }
          // 用户信息+时间All
          this.uploadAccount.push(list)
        }*/
      },

      //K手发布任务
      ksRelease(){
        console.log("this.form",this.form)
        addKuaishou(this.form)
          .then((result) => {
            // this.submitTo()
            setTimeout(()=>{
              this.$message.success('发布成功！');
              this.ksClear()
              this.$router.push({path:'/matrixManage/releaseManage/publishList',query:{types: 4 }})
            },1000)

          })
          .catch((e) => {
            this.ksClear()
            this.loading.close();
            // this.loading = false;
            this.$message.error(e);
          });
      },
      //K手发布任务_(使用抖音方式调用，可删除）
      ksRelease234(){
        console.log("this.form",this.form)
        addKuaishou(this.form)
          .then((result) => {
            console.log("K手发布任务this.form",this.form,'result',result)
            this.uploadAccount = this.uploadAccount.map((item) => {
              return{
                ...item,
                dyAccountId:item.id, //  发布账号ID
                dyPublishId:data.data.id //  发布任务ID
              }
            })
            this.publishAdds()

          })
          .catch((e) => {
            this.ksClear()
            this.$message.error(e);
          });
        /*old 代码，无需使用*/
        /*addKuaishou(this.form)
          .then((result) => {
            this.publishAdds()
          })
          .catch((e) => {
            this.loading.close();
            // this.loading = false;
            this.$message.error(e);
          });*/
      },

      //添加发布任务账号
      publishAdds(){
        publishAdd(this.uploadAccount)
          .then((data) => {
            // this.submitTo()
            this.$message.success('发布成功！');
            this.ksClear()
            this.$router.push({path:'/matrixManage/releaseManage/publishList',query:{types: 4 }})
          })
          .catch((e) => {
            this.ksClear()
            this.$message.error(e);
          });
      },


      //  提交
      submitTo(){
        // <!-- * 1脚本剪辑 =AI剪辑 * 2自定义剪辑=口播剪辑 * 3图文剪辑-->
        const typeApi = this.form.montageType ==1 ? submitProjectJob : this.form.montageType ==2 ? submitDiyJob : submitImageJob
        // 判断 如果发布的视频条数，大于关联活动的最大值，则将值传默认最大值，否则则为发布的总视频条数
        let max = this.uploadAccount.length>this.maxNum ? this.maxNum : this.uploadAccount.length
        typeApi({
          id: this.form.projectId,//剪辑工程主键ID
          maximumCount:max, //视频号最大剪辑数1
          username:this.$store.state.user.info.username
        })
          .then((data) => {
            /*this.ksClear()
            this.$message.success('发布成功！');*/
          })
          .catch((e) => {
            /*this.ksClear()
            this.$message.error(e);*/
          });
      },
      // 清除数据
      ksClear(){
        this.loading.close();
        // this.loading = false;
        this.$refs.form.resetFields()



        this.form.materialType=1

        this.$nextTick(() => {
          // 不会重新刷新分组下的用户接口。即左侧数据也会清空
          this.$refs['account'].accountClear()
          this.$refs['connected'].init()
          this.$refs['connected'].clear()
          this.$refs['seoActies'].clear()
        })
        this.form.mountType=2    //挂载类型
        this.hint=''                // 修改1
        // 清空 账号分组
        delete this.form.accountGroupName
        delete this.form.accountGroup
        // 清空 穿梭框 右侧的数据（value），以及穿梭框获取到的指定时间（uploadAccount） start
        this.uploadAccount=[]
        // 选择账号 指定——清空
        this.accountList=[]
        // 选择账号 随机——清空
        this.rightList=[]
        this.selAccountList=[]
        // 穿梭框数据清空
        this.accounts=[]
        this.value=[]
        this.stepsActive=0  // 步骤条归零
        // end
      },
      // “K手指定时间” 弹框
      specifyTime(index){
        this.timeIndex=index
        console.log('“指定时间” 弹框',this.timeIndex)
        setTimeout(()=>{
          this.$refs['timeShow'].show()
        },200)
      },
      //  “K手指定时间” 删除
      delAccount(index){
        this.$confirm('您确定要删除该账号吗？' , {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          // 删除指定下标
          this.accountList.splice(index,1)
          this.$message.success('删除成功!');
        }).catch(() => {
          this.$message.info('已取消删除');
        });

      },
    }
  }
</script>

<style lang="less" scoped>
  /*隐藏input（type=number)右边的小箭头*/
  /deep/.delInput input::-webkit-outer-spin-button,
  /deep/.delInput input::-webkit-inner-spin-button {
    -webkit-appearance: none!important;
  }
  /deep/.delInput input[type="number"]{
    -moz-appearance: textfield;
  }


  ::v-deep input::-webkit-outer-spin-button,
  ::v-deep input::-webkit-inner-spin-button {-webkit-appearance: none !important;
  }
  ::v-deep input[type='number'] {-moz-appearance: textfield !important;}

  .tiktok-title{
    font-size: 20px;
    margin-bottom: 30px;
    color: #000000;
  }
  .fit-title{
    color: #333333;
    font-size: 16px;
    margin:0px 10px 20px;
  }

  /*云创作成片库/云闪推成片库 style */
  .d-margin{
    margin-left: 38px;
    margin-bottom: 22px;
  }
  .title-class,.sel-title-class{
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 21px;
    min-width: 100px;
    padding: 0 15px;
    height: 35px;
    border-radius: 5px;
  }
  .title-class{
    color: #757575;
    background: #FAFAFC;
  }
  .sel-title-class{
    color: #1E6CEB;
    background: #DDF0FF;
  }
  /*end*/
  .account-all{
    border: 1px solid #D9D9D9;
    border-radius: 5px;
    position: relative;
    box-sizing: border-box;
    width: 156px;
    height: auto;
    margin-left: 10px;
    margin-bottom: 10px;
    .account-msg{
      background: #FAFAFC;
      img{
        width: 30px;
        height: 30px;
        border-radius: 50%;
        padding: 14px 0 12px;
      }
      div{
        text-align: center;
        color: #757575;
        padding:0 7px 7px;
      }
    }
    .is-appoint{
      color: #757575;
      font-size: 12px;
      padding: 8px 0;
      text-align: center;
    }
    .dropdown-class{
      position: absolute;
      top: 0;
      right: 5px;
    }
    i{
      font-size: 24px;
      color: #D9D9D9;
    }
  }
  .m-confirm{
    margin-top: 35px;
    margin-left: 10px;
  }
  .transfer-class {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .transfer-img{
      width: 30px;
      height: 30px;
      border-radius: 50%;
      margin-right: 15px;
    }
    .transfer-name{
      height: 30px;
      line-height: 30px;
    }
  }
</style>
